/**
 * Created by Administrator on 2017/2/27 0027.
 */
import React from "react";
import {Image, Text, TouchableOpacity, View} from "react-native";
import ModuleCommonHeader from "../module/ModuleCommonHeader";
import chjStyle from "../../CustomStyle";
import GiftedListView from "react-native-gifted-listview";
import CustomStyle from "../../../common/style/CustomStyle";
import {Actions} from "react-native-router-flux";
import {parseGetParam, request} from "../../../common/util/RequestUtil";
import * as Url from "../../constant/Url";
import LoadMoreView from "../../components/LoadMoreView";
import LoadCompleteView from "../../components/LoadCompleteView";


export default class NewsUI extends React.Component {
    // 构造函数，可执行初始化操作
    constructor(props) {
        super(props);
        // 在ES6，在构造函数里初始化state
        this.state = {};
        this._fetch = this._fetch.bind(this);
    }

    // 组件被加载时
    componentDidMount() {
    }

    // 组件即将被卸载时
    componentWillUnmount() {
    }

    // 组件被渲染时
    render() {
        return (
            <View style={chjStyle.mainContainer}>
                <ModuleCommonHeader title='车行家资讯'/>
                <GiftedListView
                    style={{
                        paddingLeft: CustomStyle.getActualSizeInHorizontal(20),
                        paddingRight: CustomStyle.getActualSizeInHorizontal(20),
                    }}
                    onFetch={this._fetch}
                    rowView={this._renderRow}
                    initialListSize={10} // the maximum number of rows displayable without scrolling (height of the listview / height of row)
                    firstLoader={true} // display a loader for the first fetching
                    pagination={true} // enable infinite scrolling using touch to load more
                    refreshable={false} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    paginationWaitingView={(callback) => {
                        return <LoadMoreView click={callback}/>
                    }}
                    paginationAllLoadedView={() => <LoadCompleteView/>}
                    withSections={false} // enable sections
                    rowHasChanged={(r1, r2) => {
                        r1.id !== r2.id
                    }}
                />
            </View>
        );
    }

    _fetch(page = 1, callback, options) {
        let url = Url.BASE_URL + '/news/m/list';

        if (page === 1) {
            this.begin = 0;
            this.total = 0;
        }
        const param = {
            begin: this.begin,
            total: this.total,
        };
        url += parseGetParam(param);
        console.log('news _fetch  url' + url);
        request(url, 'get').then(response => {
            console.log('news _fetch  ' + JSON.stringify(response));
            const data = response.data;
            const {newsUrlPrefix, imgPrefix, total, begin, list} = data;
            this.begin = begin;
            this.total = total;
            const newsList = list.map(item => {
                const id = item.newsid;
                return Object.assign({}, item, {
                    coverImg: imgPrefix + item.newslogo,
                    id: `http://m.chehangjia.cn/module/newsdetail.html?newsid=${id}&type=0&show=1`
                });
            });
            callback(newsList, {allLoaded: total <= 0});
        }).catch(err => {
            callback([]);
            console.log('news _fetch  err ' + err);
        });
    }

    _renderRow(rowData) {
        return (
            <TouchableOpacity
                style={
                    {
                        backgroundColor: 'rgba(255, 255, 255, 255)',
                        width: chjStyle.getActualSizeInHorizontal(750),
                        height: chjStyle.getActualSizeInVertical(220),
                        borderBottomWidth: 1,
                        borderBottomColor: '#Ede9ee'
                    }
                }
                onPress={() => {
                    Actions.WebViewPage(
                        {
                            title: rowData.title,
                            url: rowData.id
                        }
                    )
                }}>

                <Image
                    style={{
                        position: 'absolute',
                        top: chjStyle.getActualSizeInVertical(20),
                        left: chjStyle.getActualSizeInHorizontal(20),
                        width: chjStyle.getActualSizeInHorizontal(240),
                        height: chjStyle.getActualSizeInVertical(180)
                    }}
                    resizeMode='contain'
                    source={{uri: rowData.coverImg}}
                />

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#303030',
                        textAlign: 'left',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(30),
                        top: chjStyle.getActualSizeInVertical(26),
                        left: chjStyle.getActualSizeInHorizontal(280),
                        width: chjStyle.getActualSizeInHorizontal(450),
                    }]}>{rowData.newstitle}</Text>

                <Text
                    style={[chjStyle.baseText, {
                        position: 'absolute',
                        color: '#aaa',
                        textAlign: 'left',
                        backgroundColor: 'rgba(0, 0, 0, 0)',
                        fontSize: chjStyle.getActualFontSize(20),
                        top: chjStyle.getActualSizeInVertical(170),
                        left: chjStyle.getActualSizeInHorizontal(280),
                        width: chjStyle.getActualSizeInHorizontal(500),
                    }]}>{rowData.date}</Text>
            </TouchableOpacity>
        );
    }
}
